<template>
  <table class="table">
    <caption>
      Contacts
    </caption>
    <thead>
      <tr>
        <th>FirstName</th>
        <th>LastName</th>
        <th>Friends</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="user in userList" :key="user.id">
        <td>{{ user.firstname }}</td>
        <td>{{ user.lastname }}</td>
        <td>{{ user.friends?.length || 0 }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import { computed, onMounted } from 'vue'
import { useStore } from 'vuex'
import { info } from '@/utils'

export default {
  name: 'TablePage',
  props: {
    msg: String,
  },
  setup(props, context) {
    const store = useStore()
    const userList = computed(() => store.state.userList)

    onMounted(() => {
      store.dispatch('fetch').then(() => {
        info('store', 'fetched')
      })
    })

    return {
      userList,
    }
  },
}
</script>
